<style lang="scss" scoped>
  .tools-outline {
    padding:5px 0;
  }
</style>
<template>
  <div class="tools-outline">
    <Button v-if="config.addButton" type="primary" ghost icon="md-add" @click="$emit('handleCreate')">{{lang.add}}</Button>
    <Button v-if="config.batchDeleteButton" @click="$emit('handleDeleteMultiple')" type="error" ghost icon="md-trash" class="ivu-ml-8"
            v-show="selection.length>0">{{lang.batchDelete}}
    </Button>
    <template v-if="config.pageAdditionalAction">
      <Button v-for="(item,i) in pageAdditionalAction.buttons" :key="i" type="primary" ghost @click="item.event(item,i)" class="ivu-ml-8">{{item.title}}</Button>
    </template>
    <!-- 占位，不然工具条换行，不好看-->
    <Button style="width:1px;margin: 0px;padding: 0px;background-color: transparent;border-color: transparent;" readonly="true"></Button>
    <div class="ivu-inline-block ivu-fr">
      <Tooltip v-if="config.downloadIcon" class="ivu-ml" :content="lang.download" placement="top" transfer>
        <i-link @click.native="$emit('handleDownload')">
          <Icon type="md-download"/>
        </i-link>
      </Tooltip>
      <Tooltip v-if="config.uploadIcon" class="ivu-ml" :content="lang.selectFile" placement="top" transfer>
        <Upload :action="config.uploadUrl" :before-upload="handleUpload">
          <Icon type="ios-cloud-upload-outline"/>
        </Upload>
      </Tooltip>
      <Dropdown v-if="config.tableSizeIcon"  @on-click="$emit('handleChangeTableSize',$event)" trigger="click" transfer>
        <Tooltip class="ivu-ml" :content="lang.density" placement="top" transfer>
          <i-link>
            <Icon type="md-list"/>
          </i-link>
        </Tooltip>
        <DropdownMenu slot="list">
          <DropdownItem name="default" :selected="tableSize === 'default'">{{ lang.default }}</DropdownItem>
          <DropdownItem name="large" :selected="tableSize === 'large'">{{ lang.large }}</DropdownItem>
          <DropdownItem name="small" :selected="tableSize === 'small'">{{ lang.small }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Tooltip v-if="config.fullscreenIcon" class="ivu-ml" :content="tableFullscreen ? lang.exitFullscreen : lang.fullscreen" placement="top" transfer>
        <i-link @click.native="$emit('handleFullscreen')">
          <Icon :custom="tableFullscreen ? 'i-icon i-icon-exit-full-screen' : 'i-icon i-icon-full-screen'"/>
        </i-link>
      </Tooltip>
      <Tooltip v-if="config.refreshIcon" class="ivu-ml" :content="lang.refresh" placement="top" transfer>
        <i-link @click.native="$emit('handleRefresh')">
          <Icon custom="i-icon i-icon-refresh"/>
        </i-link>
      </Tooltip>
      <Dropdown v-if="config.columnSettingIcon" trigger="click">
        <Tooltip class="ivu-ml" :content="lang.columnSetting" placement="top" transfer>
          <i-link>
            <Icon type="md-options"/>
          </i-link>
        </Tooltip>
        <DropdownMenu slot="list">
          <div class="ivu-p-8">{{lang.columnShow}}</div>
          <Divider size="small" class="ivu-mt-8 ivu-mb-8"/>
          <template v-for="(item,index) in columns">
            <li class="ivu-dropdown-item" :key="item.title" v-if="item.title"
                @click="$emit('changeColumnShow',index)">
              <Checkbox v-model="item.show"></Checkbox>
              <span>{{ item.title }}</span>
            </li>
          </template>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'table-expand-tools',
        props: {
            config: {
                default: () => {
                    return {
                        addButton: true,
                        batchDeleteButton: true,
                        downloadIcon: true,
                        uploadIcon: true,
                        uploadUrl: '/',
                        tableSizeIcon: true,
                        fullscreenIcon: true,
                        refreshIcon: true,
                        columnSettingIcon: true
                    }
                }
            },
            tableSize: {
                default: () => {
                    return 'default'
                }
            },
            pageAdditionalAction: {
                default: () => {
                    return {
                        // width: 200,
                        // align: 'center',
                        // buttons: [
                        //     { title: {
                        //           'zh-CN': '同步',
                        //           'en-US': 'sync'
                        //       }[this.G_Locale],
                        //       event: (row, index) => this.handleQualityItem(row, index)
                        //     }
                        // ]
                    }
                }
            },
            tableFullscreen: {
                default: () => {
                    return false
                }
            },
            columns: {
                default: () => {
                    return []
                }
            },
            selection: {
                default: () => {
                    return []
                }
            }
        },
        computed: {
            lang () {
                return {
                    'en-US': {
                        default: 'default',
                        large: 'large',
                        small: 'small',
                        exitFullscreen: 'exit fullscreen',
                        fullscreen: 'fullscreen',
                        refresh: 'refresh',
                        columnSetting: 'column setting',
                        columnShow: 'column show',
                        density: 'density',
                        add: 'Add',
                        batchDelete: 'batch delete',
                        download: 'download',
                        selectFile: 'select file'
                    },
                    'zh-CN': {
                        default: '默认',
                        large: '宽松',
                        small: '紧凑',
                        exitFullscreen: '退出全屏',
                        fullscreen: '全屏',
                        refresh: '刷新',
                        columnSetting: '列设置',
                        columnShow: '列展示',
                        density: '密度',
                        add: '添加',
                        batchDelete: '批量删除',
                        download: '下载',
                        selectFile: '选择文件'
                    }
                }[this.G_Locale]
            }
        },
        methods: {
            handleUpload (file) {
                this.$emit('handleUpload ', file)
            }
        }
    }
</script>
